<template>
  <div class="app-page-box">
    <div class="app-page">
      <Back label="已提交详情" />

      <div class="apply">
        <div class="tips">
          <img class="amazing" src="/@/assets/images/amazing.png" alt="" />
          驳回原因：客户配偶资料不全，申请退回。
        </div>
        <div class="item" @click="onNav('/rzApply/lessee-list')">
          <div class="info">
            <h2>客户信息</h2>
            <div class="tip">谁要融资</div>
          </div>
          <a-button>未录入</a-button>
          <div class="content">请选择融资人</div>
          <img src="/@/assets/images/userinfo.png" alt="" />
        </div>
        <div class="item" style="background: #b9f2e9" @click="onNav('/rzApply/device-list')">
          <div class="info">
            <h2>租赁设备</h2>
            <div class="tip">要买什么</div>
          </div>
          <a-button>未录入</a-button>
          <div class="content">选择意向设备</div>
          <img src="/@/assets/images/device.png" alt="" />
        </div>
        <div class="item" style="background: #aed8f3" @click="onNav('/rzApply/planDetail')">
          <div class="info">
            <h2>融资方案</h2>
            <div class="tip">如何还款</div>
          </div>
          <a-button>未录入</a-button>
          <div class="content">选择融资方案</div>
          <img src="/@/assets/images/program.png" alt="" />
        </div>
        <div class="item" style="background: #e4e1f6" @click="onNav('/rzApply/surety-list')">
          <div class="info">
            <h2>担保方式</h2>
            <div class="tip">如何担保</div>
          </div>
          <a-button>未录入</a-button>
          <div class="content">添加担保措施</div>
          <img src="/@/assets/images/manner.png" alt="" />
        </div>
        <div class="item" style="background: #f9e8a5" @click="onNav('/rzApply/yxzl')">
          <div class="info">
            <h2>影像资料</h2>
            <div class="tip">上传材料</div>
          </div>
          <a-button>未录入</a-button>
          <div class="content">
            <span>应上传：11</span>
            <span>已上传：1</span>
            <span>未上传：1</span>
          </div>
          <img src="/@/assets/images/materials.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';

  const router = useRouter();

  const onNav = (path) => {
    console.log(123);

    router.push({
      path: path,
      query: {},
    });
  };
</script>
<style scoped lang="less">
  .app-page {
    width: 100%;
    padding: 23rem 35rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .tips {
      width: 1347rem;
      display: flex;
      align-items: center;
      font-family: Microsoft YaHei;
      font-size: 16rem;
      color: #c3162d;
      margin-bottom: 31rem;

      img {
        width: 20rem;
        height: 20rem;
        margin-right: 7rem;
      }
    }
    .apply {
      flex: 1;
      overflow: auto;
      margin-top: 32rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 0;
      .item {
        width: 1347rem;
        height: 151rem;
        background: #d7ecfa;
        border-radius: 8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 53rem;
        box-sizing: border-box;
        margin-bottom: 10rem;
        &:last-child {
          margin-bottom: 0;
        }
        .info {
          width: 90rem;
          h2 {
            font-weight: bold;
            font-family: HYLiLiangHeiJ;
            font-size: 22rem;
            color: #3ba6ec;
          }
          .tip {
            height: 14rem;
            font-size: 14rem;
            color: #000000;
          }
        }
        .ant-btn {
          margin: 0 56rem 0 48rem;
          background: #fc5451;
          color: #fff;
        }
        .content {
          width: 688rem;
          height: 97rem;
          font-family: Microsoft YaHei;
          font-size: 20rem;
          color: #fc5451;
          line-height: 97rem;
          background: #f5fafe;
          border-radius: 6rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          span {
            font-size: 16rem;
            color: #747474;
          }
        }
        img {
          height: 100%;
        }
      }
    }
  }
</style>
